<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <div v-show="page=='list'">
      <el-row class="row-bg" type="flex" align="middle">
        <p style="padding: 0;margin: 0"><b>消息模板类型</b> 配置消息模板类型以及设置消息关键字，关联发送渠道和应用
        </p>
      </el-row>
      <el-card>
        <ft-pagination :current-page="1" :page-size="8" :total="totalRowNum" @pageChange="loadTemplateTypePage">
          <div slot="toolbar">
            <el-button type="primary" size="small" icon="joys-icon-refresh"
                       @click="loadTemplateTypePage(pageIndex,pageSize)">刷新
            </el-button>
            <el-button style="margin-right: 20px" type="primary" size="small" icon="joys-icon-new"
                       @click="add">新建
            </el-button>
            <el-input style="padding-left: 15px;width: 250px" v-model="templateTypeName" placeholder="请输入模板类型名称"
                      @change="loadTemplateTypePage(pageIndex,pageSize)"/>
          </div>
          <el-table :data="templateTypePage" row-key="templateTypeId">
            <el-table-column label="模板类型名称" prop="templateTypeName" align="left">
              <template slot-scope="scope">
                <!--<span>{{scope.row.templateTypeName}}</span>-->
                <el-button @click="getRows(scope.$index,scope.row)" type="text">
                  {{scope.row.templateTypeName}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="模板类型编码" prop="templateTypeCode" align="left">
            </el-table-column>
            <el-table-column label="状态" prop="status" align="left">
              <template slot-scope="scope">
                <span v-if="scope.row.status==='INIT'">初始</span>
                <span v-if="scope.row.status==='START'">启用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-popover placement="top"
                            width="160"
                            v-model="scope.row.delEisible" v-if="scope.row.status==='INIT'">
                  <p>一旦启用，模板将不可删除、编码不可修改，确定启用？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="small" type="text" @click="scope.row.delEisible = false">取消</el-button>
                    <el-button type="primary" size="small" @click="handleStart(scope.$index, scope.row)">确定</el-button>
                  </div>
                  <el-button slot="reference" type="text" size="small">启用</el-button>
                </el-popover>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <em class="type_em_cs" v-if="scope.row.status==='INIT'">|
                </em>
                <el-popover placement="top"
                            width="160"
                            v-model="scope.row.delVisible" v-if="scope.row.status==='INIT'">
                  <p>确定删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                  </div>
                  <el-button slot="reference" type="text" size="small" style="color: #b96463"
                             v-if="scope.row.status==='INIT'">删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </ft-pagination>
      </el-card>
    </div>
    <el-card v-if="page=='card'">
      <div style="text-align: left;padding: 16px 0">
        <ft-return-btn text="返回模板类型列表" @click="returnList"></ft-return-btn>
      </div>
      <el-card style="background-color: #F4F8F9;padding-top: 40px;text-align: left">
        <el-form inline size="small" style="padding: 0 30px">
          <el-row>
            <el-col :sm="8" :md="8" :lg="8">
              <el-form-item label="模板名称">
                <ft-input v-model="templateTypeInfo.templateTypeName" :editable="editable"></ft-input>
              </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="8">
              <el-form-item label="模板编号">
                <ft-input v-model="templateTypeInfo.templateTypeCode"
                          :editable="editable&&templateTypeInfo.status==='INIT'"></ft-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align: right; padding: 16px 38px" v-if="editable">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="saveTypeInfo">保存</el-button>
        </div>
      </el-card>
      <ft-tabs v-if="templateTypeInfo.templateTypeId">
        <ft-tab-pane label="关键字配置">
          <message-template-key :template-type-id="templateTypeInfo.templateTypeId"></message-template-key>
        </ft-tab-pane>
        <ft-tab-pane label="关联发布媒介">
          <message-send-media :template-type-id="templateTypeInfo.templateTypeId"></message-send-media>
        </ft-tab-pane>
      </ft-tabs>
    </el-card>
  </div>
</template>

<script>
  import MessageTemplateKey from "./MessageTemplateKey";
  import MessageSendMedia from "./MessageSendMedia";

  export default {
    name: "MessageTemplateType",
    components: {MessageSendMedia, MessageTemplateKey},
    data() {
      return {
        page: 'list',
        templateTypePage: [],
        templateTypeInfo: {},
        editable: true,
        templateTypeName: null,
        totalRowNum: null,
        pageIndex: 1,
        pageSize: 8,
        //临时克隆对象，用于修改取消还原数据
        obj: {}
      }
    },
    methods: {
      loadTemplateTypePage(pageIndex, pageSize) {
        this.pageIndex = pageIndex || this.pageIndex || 1
        this.pageSize = pageSize || this.pageSize || 10
        this.templateTypePage = []
        const url = '/joys-rest/joys-admin/messageTemplateType/page'
        this.$http.get(url, {
          params: {
            templateTypeName: this.templateTypeName,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }
        }).then(resp => {
          this.templateTypePage = resp.data.rows
          this.totalRowNum = resp.data.total
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      getRows(index, value) {
        this.page = 'card'
        this.editable = false
        this.templateTypeInfo = value
      },
      returnList() {
        this.page = 'list'
      },
      add() {
        this.page = 'card'
        this.editable = true
        this.templateTypeInfo = {templateTypeName: null, templateTypeCode: null, editable: 'new', status: 'INIT'}
      },
      saveTypeInfo() {
        const url = '/joys-rest/joys-admin/messageTemplateType/saveType'
        this.$http.put(url, this.templateTypeInfo).then(resp => {
          this.templateTypeInfo = resp.data
          this.editable = false
          this.templateTypeInfo.editable = "noEditing"
          this.$set(this.templateTypePage, 0, this.templateTypeInfo)
          console.log(resp.data)
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      cancel(index, vo) {
        vo.editable = "noEditing"
        if (vo.messageTypeId != null) {
          //还原数据
          vo = JSON.parse(JSON.stringify(this.obj));
          this.$set(this.templateTypePage, index, vo)
        } else {
          this.templateTypePage.splice(index, 1)
        }
      },
      handleEdit(index, vo) {
        vo.editable = "editing"
        this.page = 'card'
        this.editable = true
        this.templateTypeInfo = vo
        //克隆，取消修改时使用
        this.obj = JSON.parse(JSON.stringify(vo));
      },
      handleStart(index, vo) {
        vo.status = "START"//启用
        const url = '/joys-rest/joys-admin/messageTemplateType/saveType'
        this.$http.put(url, vo).then(resp => {
          vo = resp.data
          this.$set(this.templateTypePage, index, vo)
          this.$message({
            message: '启用成功',
            type: 'success'
          });
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      handleDelete(index, vo) {
        const url = '/joys-rest/joys-admin/messageTemplateType/' + vo.templateTypeId
        this.$http.delete(url, null,).then(resp => {
          this.templateTypePage.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }, resp => {
          this.$message({
            type: 'failed',
            message: '删除失败!'
          })
        });
      }
    }
  }
</script>

<style scoped>
  .button-bar {
    display: inline-block;
    width: 150px;
    padding: 8px 0;
    vertical-align: top;
  }

  .input-bar {
    display: inline-block;
    width: calc(100% - 210px);
    font-size: 0px;
    vertical-align: top;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;
  }

  .type_em_cs {
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: rgba(27, -2147483648, -2147483648, 0.40);
    line-height: 13px;
    font-style: normal
  }
</style>
